<template>
	<view class="container">
		<view class="action_list" @click="pageJump(0)">
			<view class="row-around">
				<view class="row-around-item">
					<view class="row-top">
						<view class="row-key">{{$t('home.orderToday')}}</view>
						<view class="row-value">{{orderToday[0].todayData}}</view>
					</view>
					<view class="row-bottom">
						<view class="acea-row">
							<view class="acea-row-title">{{$t('home.selfBuilt')}}</view>
							<text class="acea-row-price">{{orderToday[0].selfData}}</text>
						</view>
						<view class="acea-row">
							<view class="acea-row-title">{{$t('home.cloudWarehouse')}}</view>
							<text class="acea-row-price">{{orderToday[0].cloudData}}</text>
						</view>
					</view>
				</view>
				<view class="row-around-item">
					<view class="row-top">
						<view class="row-key">{{$t('home.todaySales')}}</view>
						<view class="row-value">{{orderToday[1].todayData}}</view>
					</view>
					<view class="row-bottom">
						<view class="acea-row">
							<view class="acea-row-title">{{$t('home.selfBuilt')}}</view>
							<text class="acea-row-price">{{orderToday[1].selfData}}</text>
						</view>
						<view class="acea-row">
							<view class="acea-row-title">{{$t('home.cloudWarehouse')}}</view>
							<text class="acea-row-price">{{orderToday[1].cloudData}}</text>
						</view>
					</view>
				</view>
				<view class="row-around-item">
					<view class="row-top">
						<view class="row-key">{{$t('home.incomeToday')}}</view>
						<view class="row-value">{{orderToday[2].todayData}}</view>
					</view>
					<view class="row-bottom">
						<view class="acea-row">
							<view class="acea-row-title">{{$t('home.selfBuilt')}}</view>
							<text class="acea-row-price">{{orderToday[2].selfData}}</text>
						</view>
						<view class="acea-row">
							<view class="acea-row-title">{{$t('home.cloudWarehouse')}}</view>
							<text class="acea-row-price">{{orderToday[2].cloudData}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="folder-item">
			<view class="folder-item-title">
				<view>{{$t('home.onSaleManagement')}}</view>
				<view></view>
			</view>
			<view class="folder-item-conter">
				<navigator url="/pages/goods_management/index?id=1" hover-class="none">
					<view class="category">
						<image class="image" src="../../static/images/yuncang@3x.png"></image>
						<view class="lg">
							<view class="lg-name">{{$t('home.selfBuiltGoods')}}</view>
							<view class="lg-count">{{onSaleInside}}</view>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/goods_management/index?id=0" hover-class="none">
					<view class="category">
						<image class="image" src="../../static/images/zijian@3x.png"></image>
						<view class="lg">
							<view class="lg-name">{{$t('home.cloudWarehouseGoods')}}</view>
							<view class="lg-count">{{onSale}}</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>

		<view class="folder-item">
			<view class="folder-item-title" @click="pageJump(2,0)">
				<view>{{$t('home.orderManagement')}}</view>
				<u-icon name="arrow-right" color="#AAAAB9" size="26"></u-icon>
			</view>
			<view class="folder-item-conter">
				<view class="index-order-item" @click="pageJump(2,1)">
					<view class="index-order-count">{{orderCountData.zijian}}</view>
					<view>{{$t('home.selfCreatedOrder')}}</view>
				</view>
				<view class="index-order-item" @click="pageJump(2,2)">
					<view class="index-order-count">{{orderCountData.yuncang}}</view>
					<view>{{$t('home.cloudWarehouseOrder')}}</view>
				</view>
				<view class="index-order-item" @click="pageJump(2,3)">
					<view class="index-order-count">{{orderCountData.afterSale}}</view>
					<view>{{$t('home.afterSalesOrder')}}</view>
				</view>
			</view>
		</view>

		<view class="folder-item" @click="pageJump(3)">
			<view class="folder-item-title">
				<view>{{$t('home.customerManagement')}}</view>
				<u-icon name="arrow-right" color="#AAAAB9" size="26"></u-icon>
			</view>
			<view class="folder-item-conter">
				<view class="index-order-item">
					<view class="index-order-count">{{Management.month}}</view>
					<view>{{$t('home.addedThisMonth')}}</view>
				</view>
				<view class="index-order-item">
					<view class="index-order-count">{{Management.trade}}</view>
					<view>{{$t('home.transactionsThisMonth')}}</view>
				</view>
				<view class="index-order-item">
					<view class="index-order-count">{{Management.all}}</view>
					<view>{{$t('home.totalCustomers')}}</view>
				</view>
			</view>
		</view>

		<navigator url="/pages/creatBuildStore/index" hover-class="none">
			<view class="quick-shelf-item">
				<view class="quick-title">
					{{$t('home.quickOnShelf')}}
				</view>
				<view class="nav-tips">
					<text>{{$t('home.selfBuiltGoods')}}</text>
					<u-icon name="arrow-right" color="#AAAAB9" size="26"></u-icon>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		productInsideHeadersApi,
		productHeadersApi,
		getOrderNumberApi,
		getOrderTodayApi,
		getManagementApi,
	} from '@/api/api.js';
	import {
		orderListApi
	} from '@/api/order.js';
	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				tableFrom: {
					status: "all",
					dateLimit: "",
					orderId: "",
					page: 1,
					limit: 2,
					userPhone: "",
					shippingType: "",
					isIntegral: false, //积分订单
				},
				sales: {},
				order: {},
				orderChartType:{},
				Management:{},
				onSaleInside:0,
				onSale:0,
				orderCountData:{
					yuncang:0,
					zijian:0,
					afterSale:0
				},
				orderToday:[]
			}
		},
		onLoad(options) {
			this.productInsideHeaders()
			this.productHeaders()
			this.getOrderNumber()
			this.getOrderToday()
			this.getList()
			this.getManagement()
			uni.setTabBarItem({
				index: 0,
				text: this.$t('navigation.home')
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$t('navigation.cloudWarehouse')
			})
			uni.setTabBarItem({
				index: 2,
				text: this.$t('navigation.mine')
			})
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.buyerStorehouse')
			});
		},
		methods: {

			// 自建在售量
			productInsideHeaders() {
				productInsideHeadersApi().then(async res => {
					this.onSaleInside = res.data[0].count
				})
			},
			// 云仓在售量
			productHeaders() {
				productHeadersApi().then(async res => {
					this.onSale = res.data[0].count
				})
			},
			// 客户管理
			getManagement(){
				getManagementApi().then(async res=>{
					this.Management=res.data
				})
			},
			// 订单管理
			getOrderNumber() {
				var _this = this
				getOrderNumberApi().then(async res => {
					let data = res.data
					data.map(i=>{
						if (i.type==1){
							_this.orderCountData.zijian = i.number
						}
						if (i.type==2){
							_this.orderCountData.yuncang = i.number
						}
						if (i.type==3){
							_this.orderCountData.afterSale = i.number
						}
					})
					console.info(_this.orderCountData)
				})
			},
			getOrderToday(){
				getOrderTodayApi().then(async res => {
					console.info(res.data,'123')
					this.orderToday = res.data
				})
			},
			// 列表
			getList() {
				getOrderNumberApi(this.tableFrom).then((res) => {
					console.info(res.data, 123)
					this.orderChartType = res.data.status;
				}).catch(() => {});
			},
			/** 页面跳转*/
			pageJump(e, type) {
				if (e == 0) {
					uni.navigateTo({
						url: "../data_analysis/index"
					})
				}
				let isAfterSale = false
				if (e == 2) {
					let title = ''
					if (type == 0) {
						title = "订单列表"
					}
					if (type == 1) {
						title = "自建订单"
					}
					if (type == 2) {
						title = "云仓订单"
					}
					if (type == 3) {
						title = "售后订单"
						isAfterSale = true
					}
					uni.navigateTo({
						url: `../order_list/index?type=${type}&title=${title}&isAfterSale=${isAfterSale}`
					})
				}
				if (e == 3) {
					uni.navigateTo({
						url: "../customer/index"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 30rpx;
		overflow: hidden;
	}

	.action_list {
		border-radius: 10rpx;
		background-color: #000000;
		padding: 30rpx 10rpx;
		margin-bottom: 40rpx;

		.row-around {
			display: flex;
			justify-content: space-between;
			color: #F5E1A4;

			.row-around-item {
				text-align: center;
				width: 210rpx;

				.row-top {
					.row-key {
						margin-bottom: 20rpx;
					}

					.row-value {
						margin-bottom: 20rpx;
						font-size: 38rpx;
						font-weight: bold;
					}
				}

				.row-bottom {
					font-size: 24rpx;
					padding: 20rpx 10rpx 20rpx 20rpx;
					border-radius: 5rpx;
					background-color: rgba(255, 255, 255, .2);
					color: #e3e3e3;

					.acea-row {
						&-title {
							width: 100%;
							margin-bottom: 5rpx;
						}

						&-price {
							text-align: left;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-align: center;
						}
					}

					.acea-row:first-child {
						margin-bottom: 30rpx;
					}
				}
			}
		}
	}

	.folder-item {
		margin: 20rpx 0;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		color: #111111;
		font-size: 24rpx;

		&-title {
			padding: 20rpx 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
		}

		&-conter {
			display: flex;

			.category {
				display: flex;
				width: 345rpx;
				align-items: center;
				padding: 30rpx 0rpx 30rpx 40rpx;

				.image {
					width: 80rpx;
					height: 80rpx;
				}

				.lg {
					flex: 1;
					margin-left: 20rpx;

					.lg-count {
						font-weight: bold;
						font-size: 32rpx;
						margin-top: 15rpx;
					}
				}
			}

			.index-order-item {
				width: 33%;
				height: 160rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 20rpx;

				.index-order-count {
					font-weight: bold;
					font-size: 32rpx;
					margin-bottom: 18rpx;
				}
			}
		}

	}

	.quick-shelf-item {
		display: flex;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 60rpx 40rpx;
		justify-content: space-between;

		.quick-title {
			font-weight: bold;
			font-size: 34rpx;
		}

		.nav-tips {
			color: #999999;

			text {
				margin-right: 20rpx;
			}
		}
	}
</style>
